<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>运营管理后台</title>
		<!-- CSS -->
		<link href="css/OpenSans.css" rel="stylesheet" type="text/css">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/jasny-bootstrap.min.css" rel="stylesheet">
		<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
		<link href="css/daterangepicker-bs3.css" rel="stylesheet" type="text/css">
		<link href="css/datepicker.css" rel="stylesheet" type="text/css">
		<link href="css/select2.css" rel="stylesheet" type="text/css">
		<link href="css/select2-bootstrap.css" rel="stylesheet" type="text/css">
		<link href="css/uniform.default.min.css" rel="stylesheet" type="text/css">

		<!--<link href="scripts/css/prettify.css" rel="stylesheet" type="text/css" />
        <link href="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />-->
		<link href="css/fullcalendar.css" rel="stylesheet">
		<link href="css/fullcalendar.print.css" rel="stylesheet" media="print">
		<link href="css/toastr.min.css" rel="stylesheet">
		<link href="css/ark.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
            <script src="/manager/js/html5shiv.js"></script>
            <script src="/manager/js/respond.min.js"></script>
        <![endif]-->
		<script src="js/jquery.min.js"></script>
	</head>

	<body class="cover">
		<div class="wrapper">
			<!-- HEAD NAV -->
			<DIV class="navbar navbar-default navbar-static-top navbar-main" role="navigation">
				<DIV class="navbar-header">
					<A class="navbar-brand" href="#">
						运营管理后台</A>
				</DIV>
				<UL class="nav navbar-nav navbar-left">
					<LI class="sidemenu-switch">
						<A href="#">
							<SPAN class="sr-only">Toggle navigation</SPAN>
							<I class="fa fa-bars"></I>
						</A>
					</LI>
				</UL>
				<UL class="nav navbar-nav navbar-right">
					<LI class="visible-xs">
						<A class="navbar-toggle" href="#" data-toggle="collapse" data-target=".sidebar">
							<SPAN class="sr-only">Toggle 
  navigation</SPAN>
							<I class="fa fa-bars"></I> </A>
					</LI>
					<LI class="dropdown">
						<A class="dropdown-toggle avatar pull-right" href="#" data-toggle="dropdown">
							<SPAN class="hidden-small">管理员<B 
  class="caret"></B></SPAN> </A>
						<UL class="dropdown-menu pull-right">
							<LI>
								<A href="#">
									<I class="fa fa-sign-out"></I>退出登录</A>
							</LI>
						</UL>
					</LI>
				</UL>
			</DIV>
			<!-- END: HEAD NAV -->

			<!-- BODY -->
			<div class="body">
				<!-- SIDEBAR -->
				<!-- SIDEBAR -->
				<ASIDE class="sidebar">
					<UL class="nav nav-stacked">
						<LI class="menu">
							<A class="menu-toggle" href="#">
								<I class="fa fa-users fa-fw"></I>
								<SPAN class="item-label">玩家管理<I 
  class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI class="active">
									<A href="user-list.html">
										<I class="fa fa-sort-alpha-asc fa-fw"></I>
										<SPAN>玩家列表</SPAN>
									</A>
								</LI>
								<LI>
									<A href="usergame-list.html">
										<I class="fa fa-list fa-fw"></I>
										<SPAN>玩家游戏统计</SPAN>
									</A>
								</LI>
								<LI>
									<A href="user-gold.html">
										<I class="fa fa-support fa-fw"></I>
										<SPAN>金币记录</SPAN>
									</A>
								</LI>
							</UL>
						</LI>
					
						
						<LI class="menu ">
							<A class="menu-toggle" href="#/user/users">
								<I class="fa fa-user fa-fw"></I>
								<SPAN class="item-label">系统用户<I 
  class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI>
									<A href="user-manage.html">
										<I class="fa fa-sort-alpha-asc fa-fw"></I>
										<SPAN>用户管理</SPAN>
									</A>
								</LI>
								<LI>
									<A href="#">
										<I class="fa fa-th-large fa-fw"></I>
										<SPAN>角色与权限</SPAN>
									</A>
								</LI>
							</UL>
						</LI>
						<LI class="menu ">
							<A class="menu-toggle" href="#/user/users">
								<I class="fa fa-phone fa-fw"></I>
								<SPAN class="item-label">客户服务<I 
  class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI>
									<A href="#">
										<I class="fa fa-credit-card fa-fw"></I>
										<SPAN>会员反馈处理</SPAN>
									</A>
								</LI>
							</UL>
						</LI>
						<LI class="menu ">
							<A class="menu-toggle" href="#/user/users">
								<I class="fa fa-adn fa-fw"></I>
								<SPAN class="item-label">应用管理<I 
  class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI>
									<A href="#/app/notices">
										<I class="fa fa-bullhorn fa-fw"></I>
										<SPAN>公告设置</SPAN>
									</A>
								</LI>
								<LI>
									<A href="#/app/apps">
										<I class="fa fa-android fa-fw"></I>
										<SPAN>版本管理</SPAN>
									</A>
								</LI>
							</UL>
						</LI>
						<LI class="menu ">
							<A class="menu-toggle" href="#/player/players#">
								<I class="fa fa-header fa-fw"></I>
								<SPAN class="item-label">活动管理<I 
  class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI>
									<A href="#/activity/activities">
										<I class="fa fa-sort-alpha-asc fa-fw"></I>
										<SPAN>活动列表</SPAN>
									</A>
								</LI>
							</UL>
						</LI>
						<LI class="menu ">
							<A class="menu-toggle" href="#/player/players#">
								<I class="fa fa-bar-chart-o fa-fw"></I>
								<SPAN class="item-label">数据统计<I class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI>
									<A href="richest-player.html">
										<I class="fa fa-users fa-fw"></I>
										<SPAN>玩家排名统计</SPAN>
									</A>
								</LI>
								
							</UL>
						</LI>
						<LI class="menu ">
							<A class="menu-toggle" href="#/player/players#">
								<I class="fa fa-sliders fa-fw"></I>
								<SPAN class="item-label">系统管理<I 
  class="caret"></I></SPAN>
							</A>
							<UL class="submenu">
								<LI>
									<A href="#/system/logs">
										<I class="fa fa-history fa-fw"></I>
										<SPAN>系统日志</SPAN>
									</A>
								</LI>
								<LI>
									<A href="#/player/players#">
										<I class="fa fa-cloud fa-fw"></I>
										<SPAN>系统监控</SPAN>
									</A>
								</LI>
							</UL>
						</LI>
					</UL>
				</ASIDE>
				<!-- END: SIDEBAR -->
				<!-- END: SIDEBAR -->
				<section class="content" style="min-height: 866px;">
					<ol class="breadcrumb">
						<li><i class="fa fa-user fa-fw"></i>用户管理</li>
					</ol>
					<!-- CONTENT -->
					<div class="main-content">
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<div class="form-group">
									<input type="text" name="search" class="form-control" placeholder="姓名、手机号">
								</div>
							</div>
							<div class="col-md-3">
								<a href="javascript:goPage(1)" class="btn btn-primary">搜索</a>
							</div>
						</div>
						<div class="row">
							<h4 class="col-md-4">用户列表</h4>
							<div class="col-md-8 text-right">
								<a href="#user/users#" class="btn btn-link" data-toggle="modal" data-target="#selectModal"><i class="fa fa-plus fa-fw"></i>添加用户</a>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12" role="dataResult">
								<table class="table table-hover table-striped">
									<thead>
										<tr>
											<th>ID</th>
											<th>姓名</th>
											<th>手机号</th>
											<th>账号状态</th>
											<th>注册时间</th>
											<th>最后登录</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>

										<tr>
											<td>1001</td>
											<td></td>
											<td>18701683001</td>
											<td>

												<span class="label label-success">正常</span>

											</td>
											<td>2018-03-07 15:42:47</td>
											<td>2018-03-22 16:23:18</td>
											<td>
												<a data-toggle="modal" data-target="#newPassword" data-id="1001">重置密码</a>
												<a href="#user/user/1001">查看</a>

												<a data-id="1001" data-toggle="modal" data-target="#deleteModal">删除</a>
											</td>
										</tr>

									</tbody>
								</table>

								<input type="hidden" id="page" value="1">
								<ul class="pagination pagination-sm pull-left no-bottom-margin no-top-margin" role="pagination">

									<!--前-->

									<li class="disabled">
										<a href="#user/users#">«</a>
									</li>

									<!--中-->

									<li class="disabled">
										<a href="#user/users#">1</a>
									</li>

									<!--后-->

									<li class="disabled">
										<a href="#user/users#">»</a>
									</li>

								</ul>

								<div class="modal fade" role="dialog" id="sureModal" style="z-index: 10000">
									<div class="modal-dialog modal-sm">
										<div class="modal-content">
											<div class="modal-header">
												<h4 class="modal-title">确认要进行此操作吗?</h4>
											</div>
											<div class="modal-footer no-border" data-role="footer">
												<button class="btn btn-default" data-dismiss="modal">取消</button>
												<button class="btn btn-success confirm">确定</button>
											</div>
											<div class="modal-footer no-border" data-role="loading" style="display: none;">
												<img src="css/loading.gif">
											</div>
										</div>
									</div>
								</div>
								<script type="text/javascript">
									function _confirmModal(evn, title, notClose) {
										$('#sureModal').modal('show');
										$('#sureModal .btn-success').unbind('click');
										$('#sureModal .btn-success').on('click', function() {
											evn();
											if(!notClose) {
												$('#sureModal').modal('hide');
												$('.modal-backdrop').hide();
											}
										});
										if(title) {
											$('#sureModal .modal-title').html(title);
										} else {
											$('#sureModal .modal-title').html('确认要进行此操作吗？');
										}
									}
								</script>
								<!--modal 重置密码 -->
								<div id="newPassword" class="modal fade">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
												<h4 class="modal-title" id="myModalLabel">重置密码</h4>
											</div>
											<div class="modal-body clearfix" style="padding:20px 0 0 0">
												<div class="form-group col-md-12" style="margin-bottom: 0">
													<input placeholder="请输入重置后的密码" name="newPwd" type="text" class="form-control">
												</div>
											</div>
											<div class="modal-footer">
												<button class="btn btn-default" data-dismiss="modal">取消</button>
												<button class="btn btn-primary">确定</button>
											</div>
										</div>
									</div>
								</div>
								<!-- modal end -->
								<script type="text/javascript" src="css/md5.min.js"></script>
								<script type="text/javascript">
									/* 更改密码*/
									$('a[data-target=#newPassword]').on('click', function() {
										var id = $(this).attr('data-id');
										$('#newPassword .btn-primary').unbind('click');
										$('#newPassword .btn-primary').click(function() {
											var pwd = $('input[name=newPwd]').val();
											if(pwd == '') {
												mind.validateInfo($('form :input[name=newPwd]'), '不能为空')
												return false;
											} else {
												$.ajax({
													url: '/user/user/' + id + '/password',
													type: 'post',
													data: {
														password: md5(pwd)
													},
													success: function(result) {
														if(result.code === 0) {
															mind.alert('操作成功', 'success');
															$('#newPassword').modal('hide');
														} else {
															mind.alert(result.message);
														}
													}
												})
											}
										})
									})
								</script>

								<script type="text/javascript" src="css/md5.min.js"></script>
								<script>
									/* 更改密码*/
									$('a[data-target=#newPassword]').on('click', function() {
										var id = $(this).attr('data-id');
										$('#newPassword .btn-primary').unbind('click');
										$('#newPassword .btn-primary').click(function() {
											var pwd = $('input[name=newPwd]').val();
											if(pwd == '') {
												mind.validateInfo($('#newPassword :input[name=newPwd]'), '不能为空')
												return false;
											} else {
												$.ajax({
													url: '/user/user/' + id + '/password',
													type: 'post',
													data: {
														password: md5(pwd),
													},
													success: function(result) {
														if(result.code === 0) {
															mind.alert('操作成功', 'success');
															$('#newPassword').modal('hide');
														} else {
															mind.alert(result.message, 'error');
														}
													}
												})
											}
										})
									})
									$('#newPassword').on('hidden.bs.modal', function() {
										$('input[name=newPwd]').val('')
									})

									/* 删除用户*/
									$('a[data-target=#deleteModal]').on('click', function() {
										var id = $(this).attr('data-id');

										_confirmModal(removeUser, '确认移除该下级玩家吗？');

										function removeUser() {
											var url = '/user/user/' + id;
											$.ajax({
												method: 'delete',
												url: url,
												success: function(result) {
													if(result.code === 0) {
														$('#sureModal').modal('hide');
														$('.modal-backdrop').remove();
														goPage($('#page').val());
														mind.alert('操作成功', 'success');
													} else {
														mind.alert(result.message, 'error');
													}
												}
											})
										}
									});

									$('ul[role=pagination] li').on('click', function() {
										var page = $(this).attr('data-page');
										if(page && !isNaN(parseInt(page))) {
											goPage(page);
										}
									});
								</script>
							</div>
							<div role="dataLoading" class="col-md-12 center-block text-center" style="display: none">
								<img src="css/loading.gif">
							</div>
						</div>
					</div>
					<!-- END: CONTENT -->
				</section>
			</div>
			<!-- END: BODY -->
		</div>
		<!-- JS -->
		<script src="js/jquery-ui.min.js"></script>
		<script src="js/jquery.uniform.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jasny-bootstrap.min.js"></script>
		<script src="js/jquery.autosize.min.js"></script>
		<script src="js/moment.min.js"></script>
		<script src="js/daterangepicker.js"></script>
		<script src="js/bootstrap-datepicker.js"></script>
		<script src="js/fullcalendar.min.js"></script>
		<!-- <script src="/manager/vendor/dropzone/dist/min/dropzone.min.js"></script> -->
		<script src="js/select2.min.js"></script>
		<script src="js/base.js"></script>
		<!-- <script src="/manager/js/ark.js"></script> -->
		<script src="js/toastr.min.js"></script>
		<script src="js/admin.js"></script>

		<!--modal 选择用户 -->
		<div id="selectModal" role="dialog" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="#user/user">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
							<h4 class="modal-title" id="myModalLabel">添加管理员</h4>
						</div>
						<div class="modal-body clearfix" style="padding:20px 0 0 0">
							<div class="form-group col-md-12">
								<label>请输入要开通管理权限的玩家</label>
							</div>
							<div class="form-group col-md-12">
								<input placeholder="玩家帐号" name="id" type="number" max="999999" min="1000" class="form-control" required="true">
							</div>
						</div>
						<div class="modal-footer">
							<button class="btn btn-default" data-dismiss="modal">取消</button>
							<button class="btn btn-primary" data-type="create">确定</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- modal end -->
		<script>
			/* 分页*/
			function goPage(number) {
				$('div[role=dataResult]').hide();
				$('div[role=dataLoading]').show();
				var search = $('input[name=search]').val();
				$.ajax({
					url: '/user/users?page=' + number + '&keyword=' + search,
					type: 'get',
					success: function(result) {
						$('div[role=dataResult]').show();
						$('div[role=dataLoading]').hide();
						$('div[role=dataResult]').html(result)
					}
				})
			}
			/*点击回车开启 搜索*/
			$(document).keydown(function(e) {
				var search = $('input[name=search]').val();
				if(e.keyCode == 13) {
					goPage(1);
				}
			})
		</script>

	</body>

</html>